<template>
  <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="min-fill-page energy-list">
    <div v-if="!showMobilePage" style="position:relative;margin-bottom:16px;">
      <FilterInput
        ref="FilterToolRef"
        v-model="paramsObj"
        :filter-list="filterList"
        show-search-btn
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
        @filterTagStatus="filterTagStatus"
      />
      <div class="opeator-bar">
        <CreateBtn v-if="hasRouteAuth('publish:publishList:createOrImport')" style="margin-right:10px;" text="新建链接" @click.native="createLink"/>
        <MoreOpeator
          ref="moreOpeatorRef"
          :list="[
            {label: '批量导入', type: 'import', callback: fetchData, importApi: '/admin/publish/import',auth: hasRouteAuth('publish:publishList:createOrImport')},
            {label: '下载导入模板', type: 'export', exportName: '导入模板', exportApi: '/admin/publish/template/export'}
          ]"
          style="margin-right:10px;"
        />
      </div>
    </div>
    <div class="table-list">
      <div v-loading="listLoading" style="min-height: 300px">
        <u-table
          v-if="list.items.length"
          ref="publishList"
          :data="list.items"
          :border="true"
          :height="setTableHeight"
          :row-height="rowHeight(56)"
          beautify-table
          header-drag-style
          row-key="id"
          use-virtual
          element-loading-text="加载中..."
          empty-text="暂无数据"
          fit
          class="fb-table"
          header-cell-class-name="order-data-header-cell"
          @sort-change="sortMethod"
        >
          <u-table-column align="left" label="项目名称" min-width="100">
            <template slot-scope="scope">
              <div class="light-word" @click="toDetail(scope.row)">
                <ToolTip :content="scope.row.projectName" />
              </div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="资源报告编号" min-width="100">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.reportNumber" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="链接数量" min-width="100">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.linkNumber" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="报告状态" min-width="100">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.reportStatus?'已完成':'进行中'" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="更新方式" min-width="100">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.updateWay === 0 ? '手动更新' : '定时更新'" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="报告更新时间" min-width="160">
            <template slot-scope="scope">
              <ToolTip :content="format(scope.row.updateTime, 'YYYY/MM/DD HH:mm')" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="创建人" min-width="100">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.creator" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="创建时间" min-width="150">
            <template slot-scope="scope">
              <ToolTip :content="format(scope.row.createTime, 'YYYY/MM/DD HH:mm')" />
            </template>
          </u-table-column>
          <u-table-column :width="operateWidth" align="left" label="操作" fixed="right">
            <template slot-scope="scope">
              <div v-if="!showMobilePage" style="display:flex">
                <div class="button-text" @click="toDetail(scope.row)">查看</div>
                <el-dropdown trigger="click">
                  <div class="border-left el-dropdown-link">
                    <div class="button-text">更多<i class="el-icon-arrow-down"/></div>
                  </div>
                  <el-dropdown-menu slot="dropdown" class="dropdown-wrap">
                    <el-dropdown-item :disabled="!hasRouteAuth('publish:publishList:createOrImport')" style="width:90px;text-align: center" @click.native="handleAddLink(scope.row.id)">
                      <div>添加链接</div>
                    </el-dropdown-item>
                    <el-dropdown-item :disabled="!hasRouteAuth('publish:publishList:export')" style="width:90px;text-align: center">
                      <ExportButton :ref="`ExportButton_${scope.row.id}`" :key="scope.row.id" :export-api="exportApi(scope.row.id)" :export-name="'报告详情'" is-diy is-before-export @beforeExport="beforeExport(scope.row.id)">
                        <div>导出</div>
                      </ExportButton>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <tableOperateBtn v-else>
                <el-dropdown-item style="width:90px;text-align: center" @click.native="toDetail(scope.row)">
                  <div style="font-size: 14px">查看</div>
                </el-dropdown-item>
                <el-dropdown-item :disabled="!hasRouteAuth('publish:publishList:createOrImport')" style="width:90px;text-align: center" @click.native="handleAddLink(scope.row.id)">
                  <div>添加链接</div>
                </el-dropdown-item>
                <el-dropdown-item :disabled="!hasRouteAuth('publish:publishList:export')" style="width:90px;text-align: center">
                  <ExportButton :ref="`ExportButton_${scope.row.id}`" :key="scope.row.id" :export-api="exportApi(scope.row.id)" :export-name="'报告详情'" is-diy is-before-export @beforeExport="beforeExport(scope.row.id)">
                    <div>导出</div>
                  </ExportButton>
                </el-dropdown-item>
              </tableOperateBtn>
            </template>
          </u-table-column>
        </u-table>
        <EmptyPlaceholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
      </div>
      <LinkDialog ref="linkRef"/>
      <CreateLinkDialog :visible="linkVisible" :is-row-add="isRowAdd" @closeDialog="closeLinkDialog" @updateData="fetchData()"/>
      <el-row v-if="showMobilePage" type="flex" justify="left">
        <el-pagination
          v-show="list.total > 0"
          :current-page.sync="page"
          :page-size="perPage"
          :total="list.total"
          :small="true"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="pageLayout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <fixed-pagination v-show="list.total > 0">
        <template v-if="showMobilePage">
          <FilterInput
            ref="FilterToolRef"
            v-model="paramsObj"
            :filter-list="filterList"
            show-search-btn
            is-show-config
            show-mobile-icon
            @handelClick="queryClick"
            @queryEmpty="queryEmpty"
            @filterTagStatus="filterTagStatus"
          />
          <MoreOpeator
            ref="moreOpeatorRef"
            :list="[
              {label: '批量导入', type: 'import', callback: fetchData, importApi: '/admin/publish/import', auth: hasRouteAuth('publish:publishList:createOrImport')},
            ]"
            style="margin-right:10px;"
            show-mobile-icon
          />
          <CreateBtn v-if="hasRouteAuth('publish:publishList:createOrImport')" mobile-table text="新建链接" @click.native="createLink"/>
        </template>
        <template v-else>
          <div style="flex:1;" />
          <el-pagination
            v-show="list.total > 0"
            :current-page.sync="page"
            :page-size="perPage"
            :total="list.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </template>
      </fixed-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import CreateBtn from '@/components/Common/baseComponent/createBtn';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import ExportButton from '@/components/ExportButton';
import LinkDialog from '@/views/publish/detail/module/linkDialog';
import CreateLinkDialog from './createLinkDialog';
import { getReportList } from '@/api/publish';
import { format } from '@/filters/date';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { hasRouteAuth } from '@/utils/permission';
import { showModal } from '@/utils/message';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';

export default {
  components: {
    EmptyPlaceholder,
    CreateBtn,
    MoreOpeator,
    CreateLinkDialog,
    ExportButton,
    LinkDialog
  },
  mixins: [TableAdaptive, mobileTable],
  data() {
    return {
      list: {
        items: [],
        total: 0,
        isInit: true
      },
      page: 1,
      perPage: 20,
      sortType: '',
      sortName: '',
      paramsObj: {},
      listLoading: false,
      rangeKeyArr: [
        { attr: 'createTime', start: 'createTimeStart', end: 'createTimeEnd', type: 'time' },
        { attr: 'updateTime', start: 'updateTimeStart', end: 'updateTimeEnd', type: 'time' }
      ],
      linkVisible: false,
      isRowAdd: false
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    filterList() {
      const arr = [
        { keyword: 'projectName', name: '项目名称', type: 'input', labelWidth: '70px' },
        { keyword: 'reportNumber', name: '资源报告编号', type: 'input', labelWidth: '70px' },
        { keyword: 'creator', name: '创建人', type: 'input', labelWidth: '70px' },
        { keyword: 'updateTime', name: '报告更新时间', labelWidth: '70px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'createTime', name: '创建时间', labelWidth: '70px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'reportStatus', name: '报告状态', type: 'select', options: [{ value: 0, label: '进行中' }, { value: 1, label: '已完成' }] }
      ];
      return arr;
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 200 : 0;
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    hasRouteAuth,
    format,
    beforeExport(id) {
      showModal('是否确定导出数据？', '', {}).then(_ => {
        this.$refs[`ExportButton_${id}`].btnExport();
      }).catch(_ => null);
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchData();
    },
    exportApi(id) {
      return `admin/publish/report/export?id=${id}`;
    },
    getParams() {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      paramsRangeFormat(this.rangeKeyArr, params);
      if (this.sortType || this.sortName) {
        params.sortName = this.sortName;
        params.sortType = this.sortType;
      }
      return params;
    },
    fetchData(reset = false) {
      this.listLoading = true;
      if (reset) this.page = 1;
      let params = this.getParams();
      params = {
        ...params,
        page: this.page,
        perPage: this.perPage
      };
      getReportList(params).then(res => {
        this.listLoading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.list = res.data;
      }).catch(err => {
        this.listLoading = false;
        console.log(err);
      });
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    toDetail(row) {
      const routerUrl = this.$router.resolve({
        name: 'publishDetail',
        params: {
          id: row.id
        }
      });
      if (routerUrl) window.open(routerUrl.href, '_blank');
    },
    createLink(row) {
      this.linkVisible = true;
      this.rowId = row.id;
    },
    closeLinkDialog() {
      this.linkVisible = false;
    },
    handleAddLink(id) {
      const params = { id };
      this.$refs.linkRef && this.$refs.linkRef.initDialog(params);
    }
  }
};
</script>
<style lang="scss" scoped>
$bgc: #FFBC3D 0, #FD8546 1, #FF4E5F 2, #999 3, #31CC9C 4, #406EFF 5;
.energy-list {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 20px 24px 55px 24px;
}
.border-left {
  position: relative;
  padding-left:6px;
  margin-left: 6px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    background: #ddd;
    height: 14px;
  }
}
.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 5px;
  @each $c, $i in $bgc {
    &.color-#{$i} {
      background: $c;
    }
  }
}
.opeator-bar {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.light-word{
  color: #406eff;
  cursor: pointer;
}
.select-box-style{
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  background-color: #fafafc;
  padding: 5px 12px;
  text-align: center;
  font-size: 14px;
  color: #666;
  .select-data-num{
    display: inline-block;
    margin-right: 5px;
    span{
      // margin: 0 5px;
      color: #406eff;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
</style>
<style lang="scss">
.publish-err-message-box {
  .el-message-box__btns {
    display: flex;
    justify-content: center;
    flex-flow: row-reverse;
    .el-button--small {
      width: auto !important;
      margin-left: 0px;
    }
    .btn-custom-cancel {
      margin-left: 10px;
    }
  }
}
</style>
